<template>
  <div>
    <MyDialog>问题1问题1问题1问题1问题1</MyDialog>
    <MyDialog>问题2问题2问题2问题2问题2</MyDialog>
  </div>
</template>

<script>
/*
插槽 - 默认插槽
作用:让组件内部的一些 结构 支持 自定义
需求:要在页面中显示一个对话框，封装成一个组件
问题:组件的内容部分，不希望写死，希望能使用的时候自定义。
**************************************
插槽基本语法:
1.组件内需要定制的结构部分，改用<slot></slot>占位
  <template>
    <div class="dialog">
      <div class="dialog-header">
        <h3>友情提示</h3>
        <span class="close">X</span>
      </div>
      <div class="dialog-content">
        <slot></slot>  <!--*********************-->
      </div>
      <div class="dialog-footer">
        <button>取消</button>
        <button>确认</button>
      </div>
    </div>
  </template>
2.使用组件时,<MyDialog></MyDialog>标签内部,传入结构替换slot
  <MvDialog>
    你确认要退出本系统么?
  </MyDialog>
*/
import MyDialog from "./components/MyDialog.vue"
export default {
  data() {
    return {}
  },
  components: {
    MyDialog,
  },
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>